<script setup lang='ts'>
import { useCreateOrUpdateBuyerChild, useGetBuyerChildInfo, useGetPca } from '@fl/api/purchase'
import { SubmitBtn } from '@fl/components'

const form = ref()
const id = defineModel<string>('id', { required: true })
const visible = defineModel<boolean>('visible', { required: true })

const { data, isLoading: infoLoading } = useGetBuyerChildInfo(id)
const { data: pcaData, isLoading: pcaLoading } = useGetPca(visible)
const isLoading = computed(() => infoLoading.value || pcaLoading.value)

const { isPending, mutate } = useCreateOrUpdateBuyerChild()

const pcaOptions = computed(() => {
    return pcaData.value ? pcaData.value : []
})

const formValues = ref({
    addr: [],
    name: '',
})

watchEffect(() => {
    if (data.value) {
        formValues.value = {
            ...data.value,
            addr: data.value.addr.split('/'),
        }
    }
})

const columns = [
    {
        label: '子公司名称',
        prop: 'name',

    },
    {
        fieldProps: {
            props: { children: 'children', label: 'name', value: 'name' },
        },
        label: '公司地址',
        options: pcaOptions,
        prop: 'addr',
        valueType: 'cascader',
    },
]

const rules = {
    addr: [
        {
            message: '请选择公司地址',
            required: true,
        },
    ],
    name: [
        {
            message: '请输入子公司名称',
            required: true,
        },
    ],
}

async function confirm() {
    const valid = await form.value.formInstance.validate()
    if (valid) {
        const params = {
            addr: formValues.value.addr.join('/'),
            id: id.value,
            name: formValues.value.name,
        }
        mutate(params, {
            onSuccess: () => {
                ElMessage.success('提交成功')
                cancel()
            },
        })
    }
}

function cancel() {
    visible.value = false
}

function reset() {
    // 重置数据
    id.value = ''
    form.value.formInstance.resetFields()
}
</script>

<template>
    <PlusDialog v-model="visible"
                title="编辑"
                width="800"
                close-on-press-escape
                @cancel="cancel"
                @closed="reset"
    >
        <ElSkeleton v-if="isLoading"
                    animated
        />

        <PlusForm v-else
                  ref="form"
                  v-model="formValues"
                  :columns="columns"
                  :label-width="150"
                  :rules="rules"
                  :has-footer="false"
        />

        <template #footer>
            <div class="mx-auto">
                <el-button @click="cancel">
                    取消
                </el-button>

                <SubmitBtn type="primary"
                           :loading="isPending"
                           @click="confirm"
                >
                    提交
                </SubmitBtn>
            </div>
        </template>
    </PlusDialog>
</template>
